<template>
  <div class="container">
    <dv-border-box-13 style="width: 80%; height: 65vh; padding: 20px">
      <div class="map" id="container" style="width: 100%; height: 100%"></div>
    </dv-border-box-13>
    <span>您当前所在位置为：{{ addressComponent }}</span> <br /><br />
    <span>离您较近的建筑是：{{ mapData.formattedAddress }}</span> <br /><br />
    <span>经度：{{ mapData.position.lat }}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>纬度：{{ mapData.position.lng }}</span>

    <el-button style="float: right" @click="setAddress">将当前省份设为常用位置</el-button>
  </div>
</template>

<script>
import AMap from 'AMap'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      addressComponent: '',
      mapData: {
        position: {
          lat: '',
          lng: ''
        }
      },
      map: null,
      marker: null,
      arriveCoor: [114.59737, 36.656333],
      arrive: '' // 位置信息
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initMap(this.arriveCoor)
    this.mapCoor(this.arriveCoor)
    this.getLocation()
  },
  methods: {
    initMap (arriveCoor) {
      this.map = new AMap.Map('container', {
        center: arriveCoor, // 初始化地图中心点
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15
      })
      this.addMarker(arriveCoor)
    },
    // 实例化点标记
    addMarker (arriveCoor) {
      this.marker = new AMap.Marker({
        icon: '', // 图片ip
        imageSize: '20px',
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置点标记是否可以拖拽
        draggable: false,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
      })
      this.marker.setMap(this.map)
    },
    // 查询坐标
    mapCoor (lnglatXY) {
      var _this = this
      AMap.service('AMap.Geocoder', () => {
        var geocoder = new AMap.Geocoder({})
        geocoder.getAddress(lnglatXY, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            _this.arrive = result.regeocode.formattedAddress
          } else {
            _this.arrive = '暂无位置'
          }
        })
      })
    },
    // 获取当前定位
    getLocation () {
      const that = this
      this.map = new AMap.Map('container', {
        center: this.arriveCoor,
        resizeEnable: true,
        zoom: 15
      })
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          buttonPosition: 'RB', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
        })
        geolocation.getCurrentPosition(function (status, result) {
          if (status === 'complete') {
            that.onComplete(result)
          } else {
            that.onError(result)
          }
        })
      })
    },
    // 解析定位结果
    onComplete (data) {
      console.log('定位', data)
      this.addressComponent =
        '' +
        data.addressComponent.province +
        data.addressComponent.city +
        data.addressComponent.district +
        data.addressComponent.township +
        data.addressComponent.street +
        data.addressComponent.streetNumber
      this.mapData = data
      this.arriveCoor = [data.position.lng, data.position.lat]
      this.initMap(this.arriveCoor)
    },
    // 解析定位错误信息
    onError (data) {
      console.log('定位失败:' + data.message)
    },
    setAddress () {
      const arr = this.mapData.addressComponent.province.split('')
      let str = ''
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === '省') {
          arr[i] = ''
        }
        str = str + arr[i]
      }
      if (str !== '') {
        console.log('去掉省字', str)
        sessionStorage.setItem('address', str)
        this.$message({
          message: '设置成功',
          type: 'success',
          center: true
        })
      }
    }
  }
}
</script>

<style scoped lang="">
</style>
